<template>
  <div>
      <div class="wbox">
          <div class="wBottom">
              <div class="wBot">
                <template v-for="its1 in warr">
                    <div :key="its1" class="wBot-a">
                        <i></i>
                        <div>{{its1}}</div>
                    </div>
                </template>
              </div>
          </div> 
          <div class="wBot_center">
              <div class="w wBot-list">
                <div class="imgs">
                    <img src="../assets/imgs/logo.png" alt="图片"/>
                    <div>
                        <span>服务时间：08：-22:00</span>
                        <span><i></i> 400-800-8820</span>
                    </div>
                </div>
                <div class="imgs2">
                    <div class="imgs2-one">
                        <img src="../assets/imgs/w-ma2.png" alt="二维码"/>
                        <span>礼拜五官方微信</span>
                    </div>
                    <div class="imgs2-one">
                        <img src="../assets/imgs/w-ma2.png" alt="二维码"/>
                        <span>礼拜五APP</span>
                    </div>
                </div>
                <div class="list">
                    <template v-for="(ins2,v1) in warr1">
                        <div :key="v1">
                            <h3 class="list-tt">{{ins2.ng}}</h3>
                            <template v-for="(ins2ng,v1ng) in ins2.list">
                                <div :key="v1ng" class="list-ttl" @click="wChange(v1,v1ng)">
                                    {{ins2ng}}
                                </div>
                            </template>
                            
                        </div>
                    </template> 
                </div>
              </div>

          </div>
          <div class="wBot_foot">
              <div>版权所有 © 礼拜五  保留所有权利 | 沪ICP备12042163</div>
              <div>礼拜五  纵享品质</div>
          </div> 

      </div>
  </div>
</template>

<script>
export default {
    name:'Shop',
    data(){
        return{
            warr:['优新保障','全程监控','礼拜五特惠','基地直供','准时送达'],
            warr1:[
                {
                    ng:'关于礼拜五',
                    list:['新用户注册','在线下单','支付方式']
                },{
                    ng:'配送说明',
                    list:['运费说明','配送方式','发票说明']
                },{
                    ng:'售后服务',
                    list:['退换货说明','服务保障承诺','验货与签收']
                },{
                    ng:'加盟礼拜五',
                    list:['加盟条款','公司简介','服务协议']
                }
            ]

        }
    },
    methods:{
        wChange(s1,s2){
            let sm=this.warr1[s1].list[s2];
            if(sm=="新用户注册"){
                // this.$router.replace('/login');
                console.log(sm);
            }else if(sm=="在线下单"){
                console.log(sm);
            }else if(sm=="支付方式"){
                console.log(sm);
            }else if(sm=="运费说明"){
                console.log(sm);
            }else if(sm=="配送方式"){
                console.log(sm);
            }
        }
    }

}
</script>

<style scoped>
.wbox{
    width: 100%;
}
.w{
    width: 1280px;
    margin: 0 auto;
}
/* 底部 */
.wBottom{
    width: 100%;
    border-top: 1px solid #dddddd;
    height: 104px;
}
.wBot{
    width: 1280px;
    height: 60px;
    margin: 22px auto;
    display: flex;
    font-size: 24px;
    color: #333333;
    justify-content: space-around;
}
.wBot div{
    flex: 1;
    height: 60px;
    line-height: 60px;
}
.wBot-a:nth-child(1){
    border-right: 1px solid #ddd;
}
.wBot-a:nth-child(2){
    border-right: 1px solid #ddd;
}
.wBot-a:nth-child(3){
    border-right: 1px solid #ddd;
}
.wBot-a:nth-child(4){
    border-right: 1px solid #ddd;
}
.wBot-a{
    position: relative;
    height: 44px;
}
.wBot-a div{
    display: inline-block;
}
.wBot-a i{
    display: inline-block;
    height: 44px;
    width: 44px;
    /* outline: 1px solid #f00; */
    margin-right: 20px;
    vertical-align: middle;
}
.wBot-a:nth-child(1) i{
    background: url(../assets/imgs/pub-bottom.png) no-repeat 0 0 ;
}
.wBot-a:nth-child(2) i{
    background: url(../assets/imgs/pub-bottom.png) no-repeat -50px 0 ;
}.wBot-a:nth-child(3) i{
    background: url(../assets/imgs/pub-bottom.png) no-repeat -100px 0 ;
}.wBot-a:nth-child(4) i{
    background: url(../assets/imgs/pub-bottom.png) no-repeat -150px 0 ;
}
.wBot-a:nth-child(5) i{
    background: url(../assets/imgs/pub-bottom1.png) no-repeat 0 0 ;
    padding: 1px 1px;
}
.wBot_center,.wBot_foot{
    width: 100%;
    border-top: 1px solid #ddd;
}
.wBot_center {
    height:200px;
}
.wBot-list{
    font-size: 0;
    display: flex;
}
.imgs{
    height: 199px;
    width: 444px;
}
.imgs img{
    padding: 18px 0;
}
.imgs div{
    height: 66px;
    line-height: 66px;
}
.imgs div span:nth-child(1){
    font-size: 18px;
    color: #666;
    margin-right: 20px;
}
.imgs div span:nth-child(2){
    font-size: 18px;
    color: #f08200;
    font-weight: bolder;
}
.imgs div span:nth-child(2) i{
    display: inline-block;
    height: 20px;
    width: 20px;
    /* outline: #333333 1px solid ; */
    position: relative;
    top: 3px;
    background: url(../assets/imgs/w-phone.png) no-repeat 0 0 ;
}
.wBot_foot{
    padding-top: 16px;
    height: 74px;
    line-height: 23px;
}
.wBot_foot div:nth-child(1){
font-size: 14px;
color: #666;
}
.wBot_foot div:nth-child(2){
    color: #f08200;
    font-size: 14px;
}
.imgs2{
    padding-top: 20px;
    text-align: left;
    width: 340px;
    display: flex;
    color: #666666;
}
.imgs2 div{
    margin-right: 40px;
    text-align: center;
    font-size: 0;
}
.imgs2 div span{
    line-height: 49px;
    font-size: 16px;
}
.list {
    display: flex;
    text-align: left;
    padding-top: 14px;
    width: 496px;
}
.list>div{
    flex: 1;
}
.list .list-tt{
    font-size: 16px;
    color: #333333;
    line-height: 53px;
}
.list .list-ttl{
    font-size: 14px;
    color: #666666;
    line-height: 31px;
    cursor: pointer;
}
.list .list-ttl:hover{
    color: #f08200;
}
</style>